<template>
  <div class="bar-chart-09 chart" ref="barChart09"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const barChart09 = ref(null);
const echarts = inject("$echarts");

let xAxisData = ['金鸡湖街道', '唯亭街道', '胜浦街道', '斜塘街道', '娄葑街道'];
let seriesData = [
  {
    name: '打卡次数',
    data: [4, 3, 4, 5, 2, 2, 3, 5]
  },
  {
    name: '打卡人数',
    data: [2, 8, 8, 5, 9, 8, 3, 5]
  },
  {
    name: '打卡平均次数',
    data: [4, 3, 4, 5, 2, 2, 3, 5]
  },
];

const option = {
  compCode: 'C202310011',
  backgroundColor: "#000B14",
  grid: {
    top: "15%",
    bottom: "10%", //也可设置left和right设置距离来控制图表的大小
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
    axisPointer: {
      type: "shadow",
      label: {
        show: true,
      },
    },
  },
  legend: {
    data: [seriesData[0].name, seriesData[1].name,seriesData[2].name],
    top: "5%",
    textStyle: {
      color: "#ffffff",
    },
  },
  xAxis: {
    data: xAxisData,
    axisLine: {
      show: false, //隐藏X轴轴线
      lineStyle: {
        color: "#01FCE3",
      },
    },
    axisTick: {
      show: false, //隐藏X轴刻度
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff", //X轴文字颜色
      },
    },
  },
  yAxis: [
    {
      type: "value",
      name: "次",
      nameTextStyle: {
        color: "#ebf8ac",
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#162125",
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#fff",
        },
      },
    },
    {
      type: "value",
      name: "人",
      nameTextStyle: {
        color: "#ebf8ac",
      },
      position: "right",
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#162125",
        },
      },
      axisLabel: {
        show: true,
        formatter: "{value}", //右侧Y轴文字显示
        textStyle: {
          color: "#fff",
        },
      },
    },
    {
      type: "value",
      gridIndex: 0,
      min: 50,
      max: 100,
      splitNumber: 8,
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitArea: {
        show: false,
        areaStyle: {
          color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
        },
      },
    },
  ],
  series: [
    {
      name: seriesData[0].name,
      type: "bar",
      barWidth: 15,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#5AD0FF",
            },
            {
              offset: 1,
              color: "#5AD0FF",
            },
          ]),
        },
      },
      data: seriesData[0].data,
    },
    {
      name: seriesData[1].name,
      type: "bar",
      barWidth: 15,
      yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#13FDCA",
            },
            {
              offset: 1,
              color: "#13FDCA",
            },
          ]),
        },
      },
      data: seriesData[2].data,
    },
    {
      name: seriesData[2].name,
      type: "line",
      // smooth: true, //平滑曲线显示
      showAllSymbol: true, //显示所有图形。
      symbol: "circle", //标记的图形为实心圆
      symbolSize: 10, //标记的大小
      itemStyle: {
        //折线拐点标志的样式
        color: "#FFF89B",
      },
      lineStyle: {
        color: "#FFF89B",
      },
      data: seriesData[1].data,
    },
  ],
};



onMounted(() => {
  const chart = echarts.init(barChart09.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
